<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul @click="changePage">
        <li v-show="pageNo > 1" @click="lessPage">
          <button>«上一页</button>
        </li>
        <li v-show="pageNo > 3">
          <a>1</a>
        </li>
        <li v-show="pageNo > 4">
          <a>...</a>
        </li>
        <li
          v-for="(page, index) in pageArr"
          :key="index"
          :class="{ active: page === pageNo }"
        >
          <a>{{ page }}</a>
        </li>
        <li v-show="pageNo < totalPage - 3">
          <a>...</a>
        </li>
        <li v-show="pageNo < totalPage - 2">
          <a>{{ totalPage }}</a>
        </li>
        <li v-show="pageNo < totalPage" @click="morePage">
          <button>下一页»</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { computed,ref } from '@vue/runtime-core'
export default {
  name: 'Pagination',
  props: [
    'pageNo',
    'pageSize',
    'total',
    'contiues',
    'add',
    'min',
    'showCurrentPage',
  ],
  setup(props) {
    //总页数
    const totalPage = computed(() => {
      return Math.ceil(props.total / props.pageSize)
    })
    let refPageNo = ref(props.pageNo)
    //页数显示
    let pageArr = computed(() => {
      pageArr = []
      if (props.contiues > totalPage.value) {
        for (let i = 1; i <= totalPage.value; i++) {
          pageArr.push(i)
        }
      } else if (props.pageNo - Math.floor(props.contiues / 2) <= 1) {
        for (let i = 1; i <= props.contiues; i++) {
          pageArr.push(i)
        }
      } else if (
        props.pageNo + Math.floor(props.contiues / 2) >=
        totalPage.value
      ) {
        for (
          let i = totalPage.value - props.contiues;
          i <= totalPage.value;
          i++
        ) {
          pageArr.push(i)
        }
      } else {
        for (
          let i = props.pageNo - Math.floor(props.contiues / 2);
          i <= props.pageNo + Math.floor(props.contiues / 2);
          i++
        ) {
          pageArr.push(i)
        }
      }
      return pageArr
    })
    //上一页 下一页
    let lessPage = function () {
      if (props.pageNo > 1) props.min()
    }
    let morePage = function () {
      if (props.pageNo < totalPage.value) props.add()
    }
    function changePage(e) {
      if (e.target.nodeName === 'A') {
        if (Number.parseInt(e.target.innerText)) {
          const currentPage = Number.parseInt(e.target.innerText)
          props.showCurrentPage(currentPage)
        }
      }
    }
    return { totalPage, pageArr, lessPage, morePage, changePage,refPageNo }
  },
}
</script>

<style scoped lang="less">
.page {
  height: 66px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;

  .sui-pagination {
    margin: 18px 0;
    display: flex;
    justify-content: center;
    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;

      li {
        line-height: 18px;
        display: inline-block;

        a,
        button {
          display: block;
          width: 50px;
          height: 40px;
          text-align: center;
          box-sizing: border-box;
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }
        button {
          width: 90px;
        }

        &.active {
          a {
            background-color: rgb(180, 180, 180);
            color: #e1251b;
            color: #e0e9ee;
            cursor: pointer;
          }
        }

        &.prev {
          a {
            background-color: #fafafa;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }

        &.next {
          a {
            background-color: #ffffff;
          }
        }
      }
    }

    div {
      color: #333;
      font-size: 14px;
      float: right;
      width: 241px;
    }
  }
}
</style>
